<template>
  <div class="register">

    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form" label-width="80px">
      <h3 class="title">核酸用户注册</h3>
      <el-form-item label="用户姓名" prop="householdName">
        <el-input v-model="registerForm.householdName" placeholder="请输入用户姓名" />
      </el-form-item>
      <el-form-item label="用户性别" prop="sex">
      <el-select v-model="registerForm.sex" placeholder="请选择性别">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="householdPhone">
        <el-input v-model="registerForm.householdPhone" placeholder="请输入手机号码"/>
      </el-form-item>
      <el-form-item label="验证码" prop="smsCode">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input placeholder="请输入验证码" v-model="registerForm.smsCode">
              <i slot="prefix" class="el-icon-tickets"></i>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button @click="sendCode" :disabled="disabled">{{btnText}}</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="用户微信" prop="wechat">
        <el-input v-model="registerForm.wechat" placeholder="请输入用户微信" />
      </el-form-item>
      <el-form-item label="小区名称" prop="rqName">
        <el-select v-model="registerForm.rqName" placeholder="请选择小区">
          <el-option
            v-for="item in rQList"
            :key="item.value"
            :label="item.label"
            :value="item.rqName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋名" prop="buildingName">
        <el-select v-model="registerForm.buildingName" placeholder="请选择楼栋">
          <el-option
            v-for="item in buildingList"
            :key="item.value"
            :label="item.label"
            :value="item.buildingName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="住户住址" prop="householdAddress">
        <el-input v-model="registerForm.householdAddress" placeholder="请输入住户住址" />
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleRegister"
        >
          <span v-if="!loading">提 交 </span>
          <span v-else>提 交 中...</span>
        </el-button>
      </el-form-item>
    </el-form>

    <!--  底部  -->
    <div class="el-register-footer">
      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
import {addHousehold} from "@/api/basic/household";
import {getSendSmsCode} from "@/api/system/nucleicAcidUser";
import {listQuarters} from "@/api/basic/quarters";
import {listBuilding} from "@/api/basic/building";

export default {
  name: "Register",
  data() {
    return {
      time: 60,
      disabled: false,
      btnText: '发送验证码',
      open: true,
      options: [{
        value: 0,
        label: '男'
      }, {
        value: 1,
        label: '女'
      }],
      value: '',
      rQList: [],
      buildingList: [],

      codeUrl: "",
      registerForm: {
        householdName: null,
        sex: null,
        householdPhone: null,
        wechat: null,
        rqName: null,
        buildingName: null,
        householdAddress: null,
      },
      // 查询参数
      rQParams: {
        rqName: null,
        rqAdministrators: null,
        administratorsPhone: null,
        rqAddress: null,
        rqState: null
      },
      buildingParams: {
        rqName: null,
        buildingName: null,
        buildingState: null
      },

      registerRules: {
        smsCode: [{ required: true, trigger: "change", message: "请输入验证码" }],
        householdName: [{ required: true, trigger: "change", message: "请输入用户姓名" }],
        householdPhone: [{ required: true, trigger: "change", message: "请输入手机号码" }],
        wechat: [{ required: true, trigger: "change", message: "请输入用户微信" }],
        rqName: [{ required: true, trigger: "change", message: "请选择小区" }],
        buildingName: [{ required: true, trigger: "change", message: "请选择楼栋" }],
        householdAddress: [{ required: true, trigger: "change", message: "请输入住户住址" }],
      },
      loading: false,
      captchaEnabled: true
    };
  },
  methods: {
    // 获取小区
    getRq(){
      this.loading = true;
      listQuarters(this.rQParams).then(response => {
        this.rQList = response.rows;
        this.loading = false;
      });
    },

    // 获取楼栋
    getBuilding(){
      this.loading = true;
      listBuilding(this.buildingParams).then(response => {
        this.buildingList = response.rows;
        this.loading = false;
      });
    },

    //获取手机验证码
    sendCode(){
      //1.判断手机号不为空
      if(!this.registerForm.householdPhone){
        alert("手机号不能为空");
        return;
      }

      //3.获取按钮，禁用按钮
      this.disabled = true;

      //4.发送ajax请求
      getSendSmsCode(this.registerForm.householdPhone).then(res=>{
        if(res){
          alert("手机验证码已经发送到您的手机，请在10分钟内使用");
          //4.1.发送成：倒计时
          let time = 10;

          let interval = window.setInterval( function () {
            //每一条倒计时减一
            time = time - 1 ;

            //把倒计时时间搞到按钮上
            this.disabled.html(time+"秒后重发");

            //4.2.倒计时完成恢复按钮
            if(time <= 0){
              this.disabled.html("重新发送");
              this.disabled = false;
              //清除定时器
              window.clearInterval(interval);
            }
          },1000);
        }else{
          //4.3.发送失败：提示，恢复按钮
          this.disabled = false;
          alert("发送失败:"+error.message);
        }
      }).catch(error => {
        //4.3.发送失败：提示，恢复按钮
        this.disabled = false;
        alert("发送失败:"+error.message);
      })
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          addHousehold(this.registerForm).then(res => {
            const username = this.registerForm.householdName;
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push("/login");
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
          })
        }
      });
    }
  },

  mounted() {
    this.getRq();
    this.getBuilding();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 50px;
  background: #ffffff;
  width: 500px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 38px;
}
</style>
